<template>
  <div>
    <el-row class="search-row" :gutter="20">
      <el-col :span="6">
        <el-input
          placeholder="请输入订单编号"
          prefix-icon="el-icon-search"
          v-model="orderSearch.orderId"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="6">
        <el-select
          v-model="orderSearch.orderStatus"
          placeholder="请选择"
          clearable
        >
          <el-option label="待取件" value="23000">待取件</el-option>
          <el-option label="以取件" value="23001">以取件</el-option>
          <el-option label="网点自寄" value="23002">网点自寄</el-option>
          <el-option label="网点入库" value="23003">网点入库</el-option>
          <el-option label="待装车" value="23004">待装车</el-option>
          <el-option label="运输中" value="23005">运输中</el-option>
          <el-option label="网点出库" value="23006">网点出库</el-option>
          <el-option label="待派送" value="23007">待派送</el-option>
          <el-option label="派送中" value="23008">派送中</el-option>
          <el-option label="以签收" value="23009">以签收</el-option>
          <el-option label="以拒收" value="23010">以拒收</el-option>
          <el-option label="已取消" value="23011">已取消</el-option>
        </el-select>
      </el-col>
      <el-col :span="7">
        <el-select v-model="paymentStatus" clearable placeholder="请选择">
          <el-option label="未付" value="1" />
          <el-option label="已付" value="2" />
        </el-select>
      </el-col>
    </el-row>
    <el-row class="search-row" :gutter="20">
      <el-col :span="6">
        <el-input
          placeholder="请输入发件人姓名"
          prefix-icon="el-icon-search"
          v-model="orderSearch.senderName"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="6">
        <el-input
          placeholder="请输入发件人电话"
          prefix-icon="el-icon-search"
          v-model="orderSearch.senderPhone"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="7">
        <el-select
          v-model="orderSearch.senderCityId"
          clearable
          placeholder="省"
          style="width: 30%"
        >
          <el-option
            v-for="item in tableData"
            :key="item.id"
            :label="item.senderCityId"
            :value="item.senderCityId"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="orderSearch.receiverCityId"
          clearable
          placeholder="市"
          style="width: 30%"
        >
          <el-option
            v-for="item in tableData"
            :key="item.id"
            :label="item.receiverCityId"
            :value="item.receiverCityId"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="orderSearch.senderCountyIds"
          clearable
          placeholder="区/县"
          style="width: 30%"
        >
          <el-option
            v-for="item in tableData"
            :key="item.id"
            :label="item.senderCountyIds"
            :value="item.senderCountyIds"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row class="search-row" :gutter="20">
      <el-col :span="6">
        <el-input
          placeholder="请输入收件人姓名"
          prefix-icon="el-icon-search"
          v-model="orderSearch.receiverName"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="6">
        <el-input
          placeholder="请输入收件人电话"
          prefix-icon="el-icon-search"
          v-model="orderSearch.receiverPhone"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="7">
        <el-select
          v-model="orderSearch.receiverProvinceId"
          clearable
          placeholder="省"
          style="width: 30%"
        >
          <el-option
            v-for="item in tableData"
            :key="item.id"
            :label="item.receiverProvinceId"
            :value="item.receiverProvinceId"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="orderSearch.receiverCityId"
          clearable
          placeholder="市"
          style="width: 30%"
        >
          <el-option
            v-for="item in tableData"
            :key="item.id"
            :label="item.receiverCityId"
            :value="item.receiverCityId"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="orderSearch.receiverCountyIds"
          clearable
          placeholder="区/县"
          style="width: 30%"
        >
          <el-option
            v-for="item in tableData"
            :key="item.id"
            :label="item.receiverCountyIds"
            :value="item.receiverCountyIds"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-button type="info">重置</el-button>
    <template>
      <el-table
        :data="
          query().slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        border
        style="width: 100%"
      >
        <el-table-column label="序号">
          <template slot-scope="scope">
            <el-spinner v-text="scope.$index + 1"></el-spinner>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="订单编号" />
        <el-table-column label="运单编号">
          <template scope="scope">
            <span v-for="item in order" v-if="scope.row.id==item.orderId">
              {{item.tranOrderId}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="下单时间" />
        <el-table-column label="订单状态">
          <template scope="scope">
            <p v-if="scope.row.status == '23000'">待取件</p>
            <p v-if="scope.row.status == '23001'">以取件</p>
            <p v-if="scope.row.status == '23002'">网点自寄</p>
            <p v-if="scope.row.status == '23003'">网点入库</p>
            <p v-if="scope.row.status == '23004'">待装车</p>
            <p v-if="scope.row.status == '23005'">运输中</p>
            <p v-if="scope.row.status == '23006'">网点出库</p>
            <p v-if="scope.row.status == '23007'">待派送</p>
            <p v-if="scope.row.status == '23008'">派送中</p>
            <p v-if="scope.row.status == '23009'">以签收</p>
            <p v-if="scope.row.status == '23010'">以拒收</p>
            <p v-if="scope.row.status == '23011'">已取消</p>
          </template>
        </el-table-column>
        <el-table-column prop="senderName" label="发件人姓名" />
        <el-table-column prop="senderPhone" label="发件人电话" />
        <el-table-column prop="senderAddressId" label="发件人地址" />
        <el-table-column prop="receiverName" label="收件人姓名" />
        <el-table-column prop="receiverPhone" label="收件人电话" />
        <el-table-column prop="senderAddress" label="收件人地址" />
        <el-table-column prop="estimatedArrivalTime" label="预期到达时间" />
        <el-table-column prop="pickupType" label="取件类型">
          <template scope="scope">
            <p v-if="scope.row.pickupType == '1'">网点自寄</p>
            <p v-if="scope.row.pickupType == '2'">上门取货</p>
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" label="付费类型">
          <template scope="scope">
            <p v-if="scope.row.paymentMethod == '1'">预结</p>
            <p v-if="scope.row.paymentMethod == '2'">到付</p>
          </template>
        </el-table-column>
        <el-table-column prop="paymentStatus" label="付费状态">
          <template scope="scope">
            <p v-if="scope.row.paymentStatus == '1'">未付</p>
            <p v-if="scope.row.paymentStatus == '2'">已付</p>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="querydetails(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-row>
      <el-col :span="24">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 5, 10, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="query().length"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <el-dialog
      title="订单详情"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
    >
      <el-descriptions>
        <el-descriptions-item label="订单编号">{{ form2.id }}</el-descriptions-item>
        <el-descriptions-item label="运单编号" v-for="item in order" v-if="form2.id==item.orderId">
          {{ item.tranOrderId }}
        </el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ form2.createTime }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <span v-if="form2.status == '23000'">待取件</span>
          <span v-if="form2.status == '23001'">以取件</span>
          <span v-if="form2.status == '23002'">网点自寄</span>
          <span v-if="form2.status == '23003'">网点入库</span>
          <span v-if="form2.status == '23004'">待装车</span>
          <span v-if="form2.status == '23005'">运输中</span>
          <span v-if="form2.status == '23006'">网点出库</span>
          <span v-if="form2.status == '23007'">待派送</span>
          <span v-if="form2.status == '23008'">派送中</span>
          <span v-if="form2.status == '23009'">以签收</span>
          <span v-if="form2.status == '23010'">以拒收</span>
          <span v-if="form2.status == '23011'">已取消</span>
        </el-descriptions-item>
        <el-descriptions-item label="预期到达日期">{{ form2.estimatedArrivalTime }}</el-descriptions-item>
      </el-descriptions>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="基础信息" name="1">
          <el-descriptions title="发货方">
            <el-descriptions-item label="发货方姓名">{{ form2.senderName }}</el-descriptions-item>
            <el-descriptions-item label="发货方地址">{{ form2.senderProvinceId }}{{ form2.senderCityId }}{{ form2.senderCountyId }}</el-descriptions-item>
            <el-descriptions-item label="发货方电话">{{ form2.senderPhone }}</el-descriptions-item>
            <el-descriptions-item label="详细地址">{{ form2.senderAddress }}</el-descriptions-item>
          </el-descriptions>

          <el-descriptions title="收货方">
            <el-descriptions-item label="收货方姓名">{{ form2.receiverName }}</el-descriptions-item>
            <el-descriptions-item label="收货方地址">{{ form2.receiverProvinceId }}{{ form2.receiverCityId }}{{ form2.receiverCountyId }}</el-descriptions-item>
            <el-descriptions-item label="收货方电话">{{ form2.receiverPhone }}</el-descriptions-item>
            <el-descriptions-item label="详细地址">{{ form2.receiverAddress }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="">
            <el-descriptions-item label="距离">{{ form2.distance }}</el-descriptions-item>
            <!-- <el-descriptions-item label="地图">
              <baidu-map>
                <bm-view class="map" :zoom="15" :scroll-wheel-zoom="true">
                  <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
                  <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                  <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
                  <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
                  <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
                </bm-view>
                <bm-driving
                  :start="form2.senderAddress"
                  :end="form2.receiverAddress"
                  :startCity="form2.senderCityId"
                  :endCity="form2.receiverCityId"
                  :auto-viewport="true"
                  :waypoints="[]">
                </bm-driving>
              </baidu-map>
            </el-descriptions-item> -->
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item title="用户信息" name="2">
          <el-descriptions>
            <el-descriptions-item label="运费">{{ form2.amount }}</el-descriptions-item>
            <el-descriptions-item label="支付方式">{{ form2.paymentMethod }}</el-descriptions-item>
            <el-descriptions-item label="付款状态">{{ form2.paymentStatus }}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item title="货品信息" name="3">
          <el-table :data="ByOrderIdorder" style="width: 100%">
            <el-table-column label="序号">
              <template slot-scope="scope">
                <el-spinner v-text="scope.$index + 1"></el-spinner>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="货品名称" />
            <el-table-column prop="cargoValue" label="货品数量" />
            <el-table-column prop="goodsTypeId" label="货品类型" />
            <el-table-column prop="weight" label="重量(千克)" />
            <el-table-column prop="totalVolume" label="体积(方)" />
            <el-table-column prop="cargoBarcode" label="条形编码" />
            <el-table-column prop="remark" label="备注" />
          </el-table>
        </el-collapse-item>
        <el-collapse-item title="取件信息" name="4">
          <el-descriptions>
            <el-descriptions-item label="所在网点">{{ task.agencyId }}</el-descriptions-item>
            <el-descriptions-item label="取件类型">
              <span v-if="form2.pickupType==1">网点自寄</span>
              <span v-if="form2.pickupType==2">上门取货</span>
            </el-descriptions-item>
            <el-descriptions-item label="作业状态">
              <span v-if="task.status==1">待执行</span>
              <span v-if="task.status==2">进行中</span>
              <span v-if="task.status==3">待确认</span>
              <span v-if="task.status==4">已完成</span>
              <span v-if="task.status==5">已取消</span>
            </el-descriptions-item>
            <el-descriptions-item label="取件快递员">{{ task.courierId }}</el-descriptions-item>
            <el-descriptions-item label="预计取件时间">{{ task.estimatedStartTime }}</el-descriptions-item>
            <el-descriptions-item label="取件完成时间">{{ task.actualEndTime }}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
      </el-collapse>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">返回</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import order from "@/api/Order.js";

export default {
  data() {
    return {
      tableData: [],
      paymentStatus: "",
      currentPage: 1, //初始页
      pagesize: 5, //    每页的数据
      dialogVisible: false,
      activeNames: ["1", "2", "3", "4"],
      order: [],
      ByOrderIdorder:[],
      task:[],
      options: "",
      selectedOptions: [],
      form2:{},
      oredrCar:{},
      form: {
        id: "",
        orderType: "",
        pickupType: "",
        createTime: "",
        memberId: "",
        receiverProvinceId: "",
        receiverCityId: "",
        receiverCountyId: "",
        receiverAddress: "",
        receiverAddressId: "",
        receiverName: "",
        receiverPhone: "",
        senderProvinceId: "",
        senderCityId: "",
        senderCountyId: "",
        senderAddress: "",
        senderAddressId: "",
        senderName: "",
        senderPhone: "",
        currentAgencyId: "",
        paymentMethod: "",
        paymentStatus: "",
        amount: "",
        estimatedArrivalTime: "",
        distance: "",
        status: "",
        page: 0,
        pageSize: 0,
        orderCargoDto: {
          orderId: "",
          tranOrderId: "",
        },
      },

      orderSearch: {
        page: "",
        pageSize: "",
        orderId: "",
        senderName: "",
        senderPhone: "",
        senderProvinceId: "",
        senderCityId: "",
        senderCountyIds: "",
        receiverName: "",
        receiverPhone: "",
        receiverProvinceId: "",
        receiverCityId: "",
        receiverCountyIds: "",
        orderStatus: "",
        memberId: "",
        keyword: "",
      },
    };
  },
  methods: {
    showAll() {
      order.page(this.form).then((response) => {
        this.tableData = response.data.items;
      });
    },
    orderCargo() {
      order.findAll().then((response) => {
          this.order = response.data;
        });
    },
    queryTask(){
      order.showDispatch(this.form2.id,this.form2.pickupType).then((response) => {
        this.task = response.data;
      });
    },

    querydetails(row) {
      this.dialogVisible = true;
      this.form2 = row
      this.form.id = row.id;
      this.form.orderType = row.orderType;
      this.form.pickupType = row.pickupType;
      this.form.createTime = row.createTime;
      this.form.memberId=row.memberId;
      this.form.receiverProvinceId=row.receiverProvinceId;
      this.form.receiverCityId=row.receiverCityId;
      this.form.receiverCountyId=row.receiverCountyId;
      this.form.receiverAddress = row.receiverAddress;
      this.form.receiverAddressId = row.receiverAddressId;
      this.form.receiverName = row.receiverName;
      this.form.receiverPhone = row.receiverPhone;
      this.form.senderProvinceId=row.senderProvinceId;
      this.form.senderCityId=row.senderCityId;
      this.form.senderCountyId=row.senderCountyId
      this.form.senderAddress = row.senderAddress;
      this.form.senderAddressId = row.senderAddressId;
      this.form.senderName = row.senderName;
      this.form.senderPhone = row.senderPhone;
      this.form.currentAgencyId=row.currentAgencyId;
      this.form.paymentMethod = row.paymentMethod;
      this.form.paymentStatus = row.paymentStatus;
      this.form.amount = row.amount;
      this.form.estimatedArrivalTime = row.estimatedArrivalTime;
      this.form.distance = row.distance;
      this.form.status = row.status;
      console.log(2222)
      this.queryTask();
      order.findAll(null,this.form2.id).then((response) => {
          this.ByOrderIdorder = response.data;
        });
    },
    query() {
      return this.tableData.filter((item) => {
        if (this.status != "" && this.paymentStatus != "") {
          if (
            item.id.includes(this.orderSearch.orderId) &&
            item.status == this.orderSearch.orderStatus &&
            item.paymentStatus == this.paymentStatus &&
            item.senderName.includes(this.orderSearch.senderName) &&
            item.senderPhone.includes(this.orderSearch.senderPhone) &&
            item.receiverName.includes(this.orderSearch.receiverName) &&
            item.receiverPhone.includes(this.orderSearch.receiverPhone)
          ) {
            return item;
          }
        } else {
          if (
            item.id.includes(this.orderSearch.orderId) &&
            item.senderName.includes(this.orderSearch.senderName) &&
            item.senderPhone.includes(this.orderSearch.senderPhone) &&
            item.receiverName.includes(this.orderSearch.receiverName) &&
            item.receiverPhone.includes(this.orderSearch.receiverPhone)
          ) {
            return item;
          }
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleSizeChange: function (size) {
      this.pagesize = size;
      //console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      //console.log(this.currentPage)  //点击第几页
    },
    handleChange(val) {
      console.log(val);
    },
  },
  created() {
    this.showAll(),
    this.orderCargo();
  },
};
</script>
